<template>
    <div class="wrapper">
      <h2>校 友 查 询</h2>
      <div style="text-align: center">
        <el-input v-model="alumniName"
                  placeholder="请输入校友姓名"
                  clearable
                  @clear="handleClear"
                  @keyup.enter.native="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <div class="result" v-show="isNone">
        <div style="margin: auto; width: 285px; padding-top: 50px">
          <img src="../../assets/img/work.png">
          <div class="describe">未查到该校友的信息噢！</div>
        </div>
      </div>
      <div v-show="isExist" class="alumniList">
        <el-divider></el-divider>
        <div v-for="(item, index) in alumniList" :key="index">
          <div class="avatar">
            <el-image
              :src="item.createOne.avatarUrl ? baseUrl+item.createOne.avatarUrl : noAvatar"
              :preview-src-list="[item.createOne.avatarUrl ? baseUrl+item.createOne.avatarUrl : noAvatar]">
            </el-image>
          </div>
          <el-descriptions>
            <el-descriptions-item label="姓名" >
              <el-tag class="name" type="info" size="mini"
                      @click="showAlumniInfo(item.alumniId)">
                {{item.realName}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">{{item.createOne.phone}}</el-descriptions-item>
            <el-descriptions-item label="学号">{{item.stuNumber}}</el-descriptions-item>
            <el-descriptions-item label="学历">
              <el-tag size="small" type="success">{{item.education}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="入学时间">{{item.admissionDate}}</el-descriptions-item>
            <el-descriptions-item label="毕业时间">{{item.graduationDate}}</el-descriptions-item>
            <el-descriptions-item label="微信号">{{item.wechat}}</el-descriptions-item>
            <el-descriptions-item label="QQ号">{{item.qq}}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{item.email}}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{item.address}}</el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "SearchAlumni",
        data(){
            return{
                alumniName: '',
                isExist: false,
                isNone: false,
                alumniList: [],
                baseUrl: 'http://localhost:8888',
                noAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            }
        },
        mounted(){

        },
        computed: {
            isEmpty(){
                return this.alumniName;
            }
        },
        watch:{
          isEmpty(newVal, oldVal){
              if(newVal===''){
                  this.isExist=false;
                  this.isNone=false;
              }
          }
        },
        methods: {
            handleSearch(){
                const params={
                    keyword: this.alumniName,
                    current: 1,
                    size: 10
                };
                this.getRequest('/searchAlumnis', params).then(res=>{
                    if(res && res.list.length!==0){
                        this.alumniList=res.list;
                        this.$message.success(`为您找到 ${res.list.length} 个相关校友`);
                        this.isExist=true;
                    }else{
                        this.$message.warning("未找到相关校友信息!");
                        this.isNone=true;
                    }
                })
            },
            handleClear(){
                this.isExist=false;
                this.isNone=false;
            },
            showAlumniInfo(alumniId){
                let routerUrl=this.$router.resolve({path: '/alumniInfo', query: {alumniId: alumniId}});
                window.open(routerUrl.href,'_blank');
            }
        }
    }
</script>

<style scoped>
  .wrapper{
    padding-left: 5%;
  }
  h2{
    text-align: center;
    color: #2d8cf0;
    margin: 30px;
  }
  .el-input{
    width: 30%;
  }
  .result{
    background-color: #F3F5F9;
    height: 500px;
    margin-top: 30px;
  }
  .describe{
    font-size: small;
    width: 285px;
    text-align: center;
    margin-top: 10px;
  }
  .alumniList .el-image{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 40%;
  }
  .avatar{
    padding: 20px 0;
    display: flex;
  }
  .el-descriptions{
    width: 70%;
    margin: 0 auto;
  }
  .alumniList{
    margin-top: 20px;
  }


</style>
